<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>首页</title>
    <link rel="stylesheet" href="./js/layer3/theme/default/layer.css"/>
    <link rel="stylesheet" type="text/css" href="./js/bootstrap.css"/>

    <script src="./js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="./js/layer3/layer-v3.1.1.js" charset="UTF-8" type="text/javascript"></script>
    <script type="text/javascript" src="./js/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="./js/vue.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="./js/bootstrap.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="./index.js" charset="UTF-8"></script>

</head>
<div class="container-fluid" id="_vue_body">
    <div class="rightbk fn-clear">
        <div class="ui-nav fn-clear pl15">
            <div class="fn-left ft-14 pt5">
                <strong>交易流水查询</strong>
            </div>
        </div>
        <div class="ui-search-form">
            <div class="row" style="padding-top: 5px;">
                <div class="col-sm-12">
                    <div class="form-group-inline">
                        <label for="input_outTradeNo" class="col-sm-1 control-label">商户订单号:</label>
                        <div class="col-sm-3">
                            <input class="form-control" id="input_outTradeNo" placeholder="商户订单号"
                                   v-model="query.outTradeNo">
                        </div>
                    </div>
                    <div class="form-group-inline">
                        <label for="input_tradeNo" class="col-sm-1 control-label">聚合订单号:</label>
                        <div class="col-sm-3">
                            <input class="form-control" id="input_tradeNo" placeholder="聚合订单号" v-model="query.tradeNo">
                        </div>
                    </div>
                    <div class="form-group-inline">
                        <label for="input_payRequestPiNo" class="col-sm-1 control-label">支付单号:</label>
                        <div class="col-sm-3">
                            <input class="form-control" id="input_payRequestPiNo" placeholder="支付单号"
                                   v-model="query.payRequestPiNo">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="padding-top: 5px;">
                <div class="col-sm-12">
                    <div class="form-group-inline">
                        <label for="input_startTime" class="col-sm-1 control-label">开始时间:</label>
                        <div class="col-sm-3">
                            <input class="form-control" v-model="query.startTime" id="input_startTime"
                                   placeholder="开始时间" name="input_startTime"
                                   onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d'})"
                                   readonly="readonly"/>
                        </div>
                    </div>
                    <div class="form-group-inline">
                        <label for="input_endTime" class="col-sm-1 control-label">结束时间:</label>
                        <div class="col-sm-3">
                            <input class="form-control" v-model="query.endTime" id="input_endTime" placeholder="结束时间"
                                   name="input_endTime"
                                   onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d'})"
                                   readonly="readonly"/>
                        </div>
                    </div>
                    <div class="col-sm-1">
                        <button type="button" class="btn btn-danger col-sm-12" v-bind:class="{ disabled: lstFlag}"
                                v-on:click="lst(1)">查询
                        </button>
                    </div>
                    <div class="col-sm-1">
                        <button type="button" class="btn btn-primary col-sm-12" v-bind:class="{ disabled: lstFlag}"
                                v-on:click="reset4clean">重置
                        </button>
                    </div>
                    <div class="col-sm-1">
                        <button type="button" class="btn btn-success col-sm-12" v-bind:class="{ disabled: lstFlag}"
                                v-on:click="queryPay()">补单
                        </button>
                    </div>
                </div>
            </div>

        </div>

        <div class="table-responsive">
            <table class="table table-bordered table-hover">
                <thead>
                <tr class="danger">
                    <th align="center">#</th>
                    <th align="center">租赁区域</th>
                    <th align="center">公司名称</th>
                    <th align="center">电表编号</th>
                    <th align="center">电表位置</th>
                    <th align="center">电表型号</th>
                    <th align="center">计量回路</th>
                    <th align="center">上月份表底数</th>
                    <th align="center">本月份表底数</th>
                    <th align="center">互感器倍率</th>
                    <th align="center">电量</th>
                    <th align="center">单价（1.2元/度）</th>
                    <th align="center">小计</th>
                    <th align="center">面积（㎡）</th>
                    <th align="center">面积分摊比例</th>
                    <th align="center">电费</th>
                    <th align="center">备注</th>
                </tr>
                </thead>
                <tbody v-if="trades.length">
                <tr v-for="(item,i) in trades">
                    <td align="center">{{i + 1}}</td>
                    <td align="center">{{item.createdDate}}</td>
                    <td align="center">{{item.merchantNo}}</td>
                    <td align="center">{{item.outTradeNo}}</td>
                    <td align="center">{{item.tradeNo}}</td>
                    <td align="center">{{item.payRequestPiNo}}</td>
                    <td align="center">{{item.piTypes}}</td>
                    <td align="center"><span v-if="item.subTradeType==='SALE'">消费</span> <span
                            v-else-if="item.subTradeType==='REFD'">退款</span> <span v-else>{{item.subTradeType}}</span>
                    </td>
                    <td align="center">{{item.amount / 100}}</td>
                    <td align="center"><span v-if="item.payStatus==='FINI'">成功</span> <span
                            v-else-if="item.payStatus==='CLOS'">失败</span> <span
                            v-else-if="item.payStatus==='REFU'">退款</span> <span v-else style="color: red">处理中{{item.payStatus}}</span>
                    </td>
                    <td class="success" align="center"
                        v-if="item.ispay === 1 && item.payStatus!=='FINI' && item.payStatus!=='CLOS' && item.payStatus!=='REFU'">
                        <input type="checkbox" :id="item.payRequestPiNo" :value='item'
                               v-model="trypays"></td>
                    <td align="center" v-else></td>
                </tr>
                </tbody>
            </table>

            <div class="row" style="margin-right: 20px;padding-bottom: 30px;">
                <div class="form-group-inline" align="right">
                    <nav aria-label="分页">
                        <ul class="pager">
                            <li v-bind:class="{ disabled: lstFlag}"><a href="#"
                                                                       v-on:click='payNext(query.pageStart,"1")'>上一页</a>
                            </li>
                            <li v-bind:class="{ disabled: lstFlag}"><a href="#"
                                                                       v-on:click='payNext(query.pageStart,"0")'>下一页</a>
                            </li>
                            <li>总页数：{{query.pageTotal}}</li>
                            <li>，当前页：{{query.pageStart}}</li>
                            <li>，每页订单数：<select v-model="query.pageSize">
                                <option value="10">10</option>
                                <option value="20">20</option>
                                <option value="30">30</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select></li>
                        </ul>
                    </nav>
                </div>
            </div>


        </div>
    </div>
</div>

</html>